import 'package:flutter/material.dart';

class MyApp10 extends StatelessWidget {
  MyApp10({super.key});

  //提供数据
  Map orderInfo = {
    "createTime": "2024-08-15 21:49:48",
    "orderState": 2,
    "image":
        "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    "name": "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
    "totalNum": 2,
    "curPrice": 119.5,
    "totalMoney": 119.5,
    "attrsText": "规格:白色240ml"
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //1.导航
        appBar: AppBar(
          title: const Text('案例商品订单详情'),
          backgroundColor: Colors.pink,
        ),
        //2.内容
        body: Container(
            width: double.infinity,
            height: 250,
            padding: EdgeInsets.all(10),
            color: Color.fromARGB(255, 224, 224, 224),
            child: Column(
              children: [
                //1.2.1第一层
                Row(
                  children: [
                    Text(orderInfo['createTime']),
                    Spacer(),
                    Text(
                      orderInfo['orderState'] == 2 ? '待发货' : '待支付',
                      style: TextStyle(
                          color: orderInfo['orderState'] == 2
                              ? Colors.yellow
                              : Colors.red),
                    )
                  ],
                ),
                //1.2.2第二层
                Padding(
                    padding: EdgeInsets.only(top: 10),
                    child: Row(
                      //侧轴方向起始位置对齐
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        //左侧
                        Image(
                          width: 100,
                          height: 100,
                          image: NetworkImage(orderInfo['image']),
                        ),
                        //右侧
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.only(left: 10),
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  //商品名称加数量
                                  Row(
                                    children: [
                                      Expanded(
                                        child: Text(orderInfo['name']),
                                      ),
                                      Text('x2')
                                    ],
                                  ),
                                  SizedBox(height: 10),
                                  //规格
                                  Padding(
                                    padding: EdgeInsets.only(top: 5),
                                    child: Container(
                                      padding: EdgeInsets.all(5),
                                      decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      child: Text(
                                        orderInfo['attrsText'],
                                        maxLines: 1,
                                        style: TextStyle(
                                            fontSize: 12, color: Colors.red),
                                      ),
                                    ),
                                  ),
                                  //价格
                                  Padding(
                                    padding: EdgeInsets.only(top: 5),
                                    child: Text('￥${orderInfo['curPrice']}'),
                                  )
                                ]),
                          ),
                        ),
                      ],
                    )),

                //1.2.3第三层
                //合计，右对齐
                Padding(
                  padding: EdgeInsets.only(top: 10),
                  child: Row(
                    children: [
                      Spacer(),
                      const Text('合计：'),
                      Text('￥${orderInfo['totalMoney']}'),
                    ],
                  ),
                ),
                //1.2.4第四层
                //两个按钮 确认收货和取消订单
                Padding(
                    padding: EdgeInsets.only(top: 10),
                    child: Row(children: [
                      Spacer(),
                      ElevatedButton(
                        onPressed: () {},
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.red),
                        child: Text(
                          '确认收货',
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      ElevatedButton(
                        onPressed: () {},
                        style: ElevatedButton.styleFrom(
                            backgroundColor:
                                Color.fromARGB(255, 148, 241, 234)),
                        child: Text(
                          '取消订单',
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        ),
                      ),
                    ]))
              ],
            )));
  }
}
